<template>
  <div>
    <br />
    <a-row>
      <a-col span="2">Hmac</a-col>
      <a-col span="22">
        <a-button class="btn" type="primary" size="small" @click="md5PopClick('md5')">Hmac(MD5)</a-button>
        <a-button class="btn" type="primary" size="small" @click="md5PopClick('sha1')">Hmac(SHA1)</a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('sha256')"
        >Hmac(sha256)</a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('sha512')"
        >Hmac(sha512)</a-button>
      </a-col>
    </a-row>
    <!--提示框-->
    <w-modal
      ref="WModal"
      :title="`Hmac(${form.type})`"
      :ok-type="form.data ? 'danger' : 'primary'"
      :ok-text="form.data ? '清 除' : '确 定'"
      @ok="okBtnClick"
    >
      <a-input v-model="form.value" type="textarea" placeholder="请输入..."></a-input>
      <br />
      <br />
      <a-input v-model="form.key" type="text" placeholder="请输入KEY..." />
      <template v-if="form.data">
        <br />
        <br />
        <w-copy-text :text="form.data">{{ form.data }}</w-copy-text>
      </template>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Api } from "@/config/api";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  name: "WebToolCryptoMd5",
  components: {
    WModal,
  },
})
export default class WebToolCryptoMd5 extends Vue {
  isShow = false;
  form = {
    type: "",
    key: "",
    value: "",
    data: "",
  };

  md5PopClick(type: any) {
    this.form.key = "";
    this.form.value = "";
    this.form.data = "";
    this.form.type = type;
    (this.$refs.WModal as ModalComType).show();
  }

  okBtnClick() {
    if (this.form.data) {
      this.form.key = "";
      this.form.value = "";
      this.form.data = "";
      return;
    }
    (this.$refs.WModal as ModalComType).showLoading();
    this.$wAxios
      .$post(Api.coding.hmac, {
        key: this.form.key,
        type: this.form.type,
        input: this.form.value,
      })
      .then((data) => {
        this.form.data = data;
      })
      .catch(() => {})
      .finally(() => {
        (this.$refs.WModal as ModalComType).hideLoading();
      });
  }
}
</script>

<style scoped></style>
